<template>
    <div class="login-code b-f">
        <div class="title">
            <img
                src="https://qbb-public-read.oss-cn-shanghai.aliyuncs.com/customer/app/431/logo/logo_ayf.png"
                alt=""
            />
        </div>
        <div class="slogan">
            <div class="left">
                <div class="first">您好~</div>
                <div class="second">欢迎登录安易付~</div>
            </div>
            <div class="right" @click="goRegister">新用户注册</div>
        </div>
        <div class="content">
            <van-form ref="form">
                <van-field
                    name="phone"
                    v-model="phone"
                    clearable
                    placeholder="请输入手机号"
                    maxlength="11"
                    :rules="[
                        { required: true, message: '请填写手机号' },
                        {
                            validator: validatorPhone,
                            message: '请输入有效的手机号',
                        },
                    ]"
                >
                    <template slot="left-icon">
                        <img
                            src=""
                            alt=""
                        />
                    </template>
                </van-field>
                <van-field
                    v-model="code"
                    name="code"
                    placeholder="请输入验证码"
                    :rules="[{ required: true, message: '请填写验证码' }]"
                >
                    <template slot="left-icon">
                        <img
                            src=""
                            alt=""
                        />
                    </template>
                    <template slot="right-icon">
                        <span class="code disable"> 获取验证码 </span>
                    </template>
                </van-field>
            </van-form>
            <van-button
                class="login-btn active"
                :loading="loading"
                type="primary"
                loading-type="spinner"
                loading-text="登录"
                @click="onLogin"
                >登录</van-button
            >
            <div class="others-login">
                <div class="left" v-if="wechatBtn">微信登录</div>
                <div class="middle" v-if="wechatBtn"></div>
                <div class="right" @click="goPassword">密码登录</div>
            </div>
            <div class="agreement">
                <van-checkbox
                    v-model="checked"
                    checked-color="#f24b3a"
                    icon-size="15px"
                ></van-checkbox>
                <div class="ct">
                    <div class="ag">我已阅读并同意</div>
                    <div class="col-9">
                        <span style="color: #ffa543">《用户协议》</span>
                        <span>、</span>
                        <span style="color: #ffa543">《隐私政策》</span>
                    </div>
                </div>
            </div>
            <div class="call">
                如有疑问，请拨打客服电话
                <span class="col-3">400-931-8788</span>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        props: [], // 父辈向子辈传参
        name: 'login-code',
        components: { // 组件的引用

        },
        data() {
            return {
                phone: '',
                code: '',
                loading: false,
                wechatBtn: false,
                checked: false
            }
        },
        methods: {
            goPassword() {
                this.$router.push("/login-pwd");
            },
            goRegister() {
                this.$router.push("/register");
            },
            validatorPhone(val) {
                return /^1[3456789]\d{9}$/.test(val)
            },
            isWechat() {
                let ua = navigator.userAgent.toLowerCase()
                if (ua.match(/MicroMessenger/i) == 'micromessenger') {
                    // 微信环境
                    // console.log("微信浏览器");
                    this.wechatBtn = true
                } else {
                    // 非微信环境
                    // console.log("普通浏览器");
                    this.wechatBtn = false
                }
            },
            onLogin() {
                this.$refs.form.validate().then(() => {
                    if (this.checked) {
                        this.loading = true
                    } else {
                        this.$toast('请阅读并同意相关协议')
                    }
                    // this.loading = true

                }).catch((err) => {
                    //失败时的程序
                    console.log("err", err);
                })
            }
        },
        computed: {},
        watch: {},
        created() { },
        mounted() {
            this.isWechat()
        },
    }
</script>
    
<style scoped lang='scss'>
    .login-code {
        min-height: 100vh;
        padding: 0 30px;
        .title {
            padding: 20px 0 0;
            & > img {
                width: 60px;
                height: 60px;
                border-radius: 4px;
            }
        }
        .slogan {
            font-size: 23px;
            font-weight: 500;
            color: #000;
            display: flex;
            align-items: flex-end;
            justify-content: space-between;
            .right {
                font-size: 14px;
                font-weight: 400;
                color: #f24b3a;
            }
        }
        .content {
            text-align: center;
            margin-top: 40px;
            .van-cell {
                margin-bottom: 15px;
                text-align: left;
                display: flex;
                align-items: center;
                border-bottom: 1px solid #f0f0f0;
                padding: 0;
            }

            .van-field__left-icon > img {
                display: block;
                height: 25px;
                width: 25px;
                object-fit: contain;
            }
            .code {
                line-height: 54px;
                height: 100%;
                font-size: 14px;
                font-weight: 500;
                color: #f24b3a;
                word-break: keep-all;
                box-sizing: content-box;
            }
            .disable {
                color: #999;
            }
            ::v-deep .van-field__body {
                height: 54px;
                line-height: normal;
                padding: 0 20px 0 8.5px;
                flex: 1;
                font-size: 17px;
                box-sizing: border-box;
                .van-field__control::-webkit-input-placeholder {
                    font-size: 15px;
                    font-weight: 400;
                    color: #c6c6c6;
                }
            }
            .login-btn {
                width: 315px;
                height: 50px;
                background: rgba(242, 75, 58, 0.4);
                border-radius: 24px;
                line-height: 50px;
                font-size: 17px;
                font-weight: 500;
                color: #fff;
                margin-top: 50px;
                border: none;
            }
            .active {
                background: #f24b3a;
            }

            .others-login {
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 14px;
                font-weight: 400;
                color: #626262;
                margin-top: 25px;
                .middle {
                    width: 1px;
                    background-color: #ccc;
                    height: 13px;
                    margin: 0 20px;
                }
            }

            .agreement {
                font-size: 12px;
                font-weight: 400;
                color: #999;
                margin-top: 100px;
                display: flex;
                align-items: center;
                ::v-deep .van-checkbox__icon {
                    margin-right: 5px;
                }
                ::v-deep .van-checkbox__icon .van-icon {
                    border: 1.2px solid #f24b3a;
                }
                .ct {
                    display: flex;
                    align-items: center;
                }
            }
            .call {
                font-size: 12px;
                font-weight: 400;
                color: #999;
                margin-top: 14.5px;
                padding-bottom: 36px;
            }
        }
    }
</style>